<template>
  <div class="flex items-center justify-end gap-x-2.5">
    <span class="text-xs"> {{ showCurrent }} / {{ showTotal }}</span>
    <IconPark class="icon-hover" :icon="TextMessage" :size="18" @click="setLyricStatus(true)" />
    <span class="icon-hover flex align-bottom">
      <IconPark :icon="MenuUnfoldOne" :size="18" @click="setPlayListStatus(true)" />
      <span class="text-xs align-bottom">{{ playListCount }}</span>
    </span>
  </div>
</template>

<script lang="ts" setup>
import { computed, toRefs, unref } from 'vue'
import IconPark from '@/components/icon-park/IconPark.vue'
import { MenuUnfoldOne, TextMessage } from '@icon-park/vue-next'
import { usePlayerStore } from '@/stores/player'
const { setPlayListStatus, setLyricStatus, duration, currentTime, playListCount } = toRefs(usePlayerStore())
import { useFormat } from '@/hooks/useFormat'
const { formatTimeStamp } = useFormat()

// 总时长
const showTotal = computed(() => (duration ? formatTimeStamp(unref(duration)) : `00:00:00`))

// 当前播放时间
const showCurrent = computed(() => (currentTime ? formatTimeStamp(unref(currentTime)) : `00:00:00`))
</script>

<style lang="less" scoped></style>
